<template>
<div>
  <mu-row gutter>
    <mu-col desktop="67">
      <div class="checkbox">
      <mu-checkbox label="选择全部未被屏蔽的图片" v-model="chooseStatus" @change="chooseAll" />
      </div>
      <mu-raised-button label="屏蔽" @click="disPictures()" class="bd-radius" secondary/>
      <mu-raised-button label="通过" @click="allowPictures()" class="bd-radius" backgroundColor="#4BAF4F"/>
      <mu-raised-button label="恢复初始状态" class="bd-radius" />
    </mu-col>
    <mu-col desktop="33">
      <div class="gutter-right-item">
        <span class="checkbox">每页显示</span>
        <input class="showNum" type="number" v-model:value="showNum" />
        <span class="checkbox">个</span>
        <div class="refresh-box" v-show="thisPage == 0">
          <mu-raised-button label="刷新" class="bd-radius" @click="refreshFunction()"backgroundColor='#301B91'/>
          <mu-circular-progress v-show="isShow" class="refresh" :size="24"/>
        </div>
        <div class="refresh-box" v-show="thisPage != 0">
          <mu-flat-button label="上一页" @click="goForward()" />
          <span>{{thisPage}}</span>
          <mu-flat-button label="下一页" @click="goBack()"/>
        </div>
      </div>
    </mu-col>
  </mu-row>
</div>
</template>

<script>
  import http from "../http/http.js" 
export default {
  props:['checkboxStatus','isShow','pageNumber','refreshFunction','data','page'],
  data () {
    return {
      chooseStatus:false,
      showNum:10,
      thisPage:0,//页码
      handleArr:[],
      pictureCheckUrl:'http://www.meimei.com/checkPicture',
      returnPictures:[]
    }
  },
  mounted () {
    this.scroller = this.$el
    this.showNum = this.pageNumber
    if(this.isNumber(this.page)){
      this.thisPage = this.page
    }
  },
  methods: {
    //------------------不能打开下面的注释，理论上是应该要有这个函数的，但是知道什么原因没有这个
    //------------------函数也好使（通过或屏蔽的状态能返回父组件）
    // //返回结果图片
    // returnPicturesFunc: function(){
    //   // this.$emit("update:data", this.returnPictures)
    // },

    //选中所有未被屏蔽的图片
    chooseAll: function(){
      if(!this.chooseStatus){ //选中时获取所有未被屏蔽的图片
        for(var i in this.data){
          if(this.data[i].picture_check != 2){
            this.handleArr.push({
              picture_id:this.data[i].picture_id,
              picture_check:this.data[i].picture_check
            })
          }
        }
      }else{
        this.handleArr=[]
      }
    },
    //通过所有图片
    allowPictures:function(){
      if(this.handleArr.length > 0){
        var that = this
        var index = 0
        for(var i in this.handleArr){
          index = i
          http.post(that.pictureCheckUrl,{
            picture_id:that.handleArr[i].picture_id,
            picture_check:2,
          })
          .then(function(response){
            if(response.data.code == 200){
              that.returnPictures = that.data
              for(var ii in that.returnPictures){
                if(that.returnPictures[ii].picture_id == response.data.picture_id){
                  that.returnPictures[ii].picture_check = 1
                }
              }
              // this.handleArr[i].picture_check = 2
            }
          })
          .catch(function(err){console.log(err)});
        }
        // this.returnPicturesFunc();
      }
    },
    //屏蔽所有图片
    disPictures:function(){
      if(this.handleArr.length > 0){
        var that = this
        var i = 0
        var index = 0
        for(var i in this.handleArr){
          index = i
          http.post(that.pictureCheckUrl,{
            picture_id:that.handleArr[i].picture_id,
            picture_check:2,
          })
          .then(function(response){
            if(response.data.code == 200){
              that.returnPictures = that.data
              for(var ii in that.returnPictures){
                if(that.returnPictures[ii].picture_id == response.data.picture_id){
                  that.returnPictures[ii].picture_check = 2
                }
              }
              // this.handleArr[i].picture_check = 2
            }
          })
          .catch(function(err){
            console.log(err)
          });
       
        }
        // this.returnPicturesFunc();
      }
    },
    goForward: function(){
      if(this.thisPage >= 2){
        this.thisPage--
        this.$emit("update:page", this.thisPage)
        this.refreshFunction()
      }
    },
    goBack: function(){
      if(this.data.length >= this.showNum){
        this.thisPage++
        this.$emit("update:page", this.thisPage)
        this.refreshFunction()
      }
    },
    //判断是否为数字
      isNumber: function (value) { 
        //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/ 
　　　　var re = /^[0-9]+.?[0-9]*$/; 
    　　if (!re.test(value)) {
    　　　　return false;
    　　}
  　　　　return true; 
  　　} 
  },
  watch:{
    showNumWatch(val,oldVal){
      this.$emit("update:pageNumber", val)
    },
    chooseStatus(val,oldVal){
      this.$emit("update:checkboxStatus", val)
    },
    pageNumber(val,oldVal){
      this.showNum = this.pageNumber
    },
    checkboxStatus(val,oldVal){
      this.chooseStatus = this.checkboxStatus
    },
  },
  computed:{
    showNumWatch:function(){
        return this.showNum;
    }
  }
}
</script>

<style lang="css">
.col{
  padding:15px;
}
.checkbox {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  margin-right: 10px;
}
.mu-checkbox-svg-icon{
  width:35px;
  height:35px;
  margin-top: -5px;
}
.bd-radius{
  border-radius: 11px;
}
.showNum{
  width: 50px;
}
.gutter-right-item{
  float: right;
}
.refresh-box{
  display: inline-block;
  position: relative;
}
.refresh{
  position: absolute;
  z-index: 6;
  top:4px;
  left: 32px;
  background: 
}
.picture-list-box .col{
  padding:0px;
}
</style>